<template>
  <div class="page-container">
    <div class="toolbar" style="float:left;padding-top:10px;">
      <el-form :inline="true" :size="size" :model="searchForm">
        <el-form-item>
          <el-select v-model="searchForm.number" placeholder="请选择阈值">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-input v-model="searchForm.keyword" placeholder="请输入异常天数"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-date-picker v-model="searchForm.sTime" :size="size" type="date"  value-format="yyyy-MM-dd" @change="startTimeStatus" placeholder="开始时间" :picker-options="pickerOptionsStart" style="margin-right: 10px;">
          </el-date-picker>
          至
          <el-date-picker v-model="searchForm.eTime" :size="size" type="date" value-format="yyyy-MM-dd" @change="endTimeStatus" placeholder="结束时间" :picker-options="pickerOptionsEnd" style="margin-left: 10px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="queryList(true)">{{$t('action.search')}}</el-button>
        </el-form-item>
        <el-form-item>
          <kt-button icon="el-icon-download" :label="$t('action.import')" perms="vault:number:execl" type="primary" @click="handleImport" />
        </el-form-item>
      </el-form>
    </div>
    <cs-table :table-data="tableData"
              :table-label="tableLabel"
              @handleButton="handleButton"
              :loading="loading"
              :isSelection="isSelection"
              :table-option="tableOption">
      <template slot="operate_type" slot-scope="scope">
        <span v-if="scope.row.operate_type === '1'">应用</span>
        <span v-if="scope.row.operate_type === '2'">主机</span>
        <span v-if="scope.row.operate_type === '3'">数据库</span>
      </template>
      <template slot="appr_type" slot-scope="scope">
        <span v-if="scope.row.appr_type === '1'">现场审批</span>
        <span v-if="scope.row.appr_type === '2'">短信授权</span>
        <span v-if="scope.row.appr_type === '3'">工单匹配</span>
      </template>
    </cs-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageRequest.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageRequest.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right; margin-top: 10px"
    >
    </el-pagination>
  </div>
</template>
<script>
import CsTable from '@/components/cs-table'
import KtButton from "@/views/Core/KtButton"
import {queryGetTimeToNumber} from '@/api/abnormal/examine.js'
import {queryConfigList} from '@/api/abnormal'
import {exportExcel} from '@/utils/improtFile'
export default {
  data() {
    return {
      options: [],
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.searchForm.eTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.searchForm.sTime
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            )
          }
        }
      },
      size: window.SITE_CONFIG.tableSize,
      searchForm: {
        keyword: '',
        eTime: '',
        sTime: '',
        number: ''
      },
      tableData: [],
      tableLabel: [
        { label: '审批人', param: 'appr_person_name', align: 'center', isShow: true},
        { label: '异常类型', param: 'exception_type', align: 'center', isShow: true},
        { label: '审批次数', param: 'number', align: 'center', isShow: true},
        { label: '审批日期', param: 'check_time', align: 'center', isShow: true},
        { label: '审批方式', param: 'appr_type', align: 'center', isShow: true, slot: true},
        { label: '业务类型', param: 'operate_type', align: 'center', isShow: true, slot: true},
        { label: '操作从账号标识', param: 'sub_acct_id', align: 'center', isShow: true}
      ],
      isSelection: false,
      loading: false,
      tableOption: {
        // label: '操作',
        // width: '300',
        // options: [
        //   { label: '查看详情', type: '', icon: 'el-icon-view', methods: 'edit', auth: 'btos:norm:update' },
        //   { label: '下载报表', type: 'danger', icon: 'el-icon-download', methods: 'download', auth: 'btos:norm:delete' }
        // ]
      },
      pageRequest: {
        pageNo: 1,
        pageSize: 10
      },
      totalPage: 0
    }
  },
  created () {
    this.queryConfigList()
  },
  methods: {
    // 导出
    handleImport () {
      const  {sTime, eTime, number} = this.searchForm
      const parms = {
        startTime: sTime,
        endTime: eTime,
        thresholdValue: number
      }
      exportExcel('/vault/number/execl', parms, 1)
    },
    async queryConfigList () {
      const parms = {
        id: 3
      }
      const data = await queryConfigList(parms)
      if (data) {
        if (data.code === 200) {
          this.options = data.data.exceptionParamter.split(',')
          this.searchForm.number = this.options[0]
          this.queryList(true)
        } else {
          this.options = []
        }
      }
    },
    async queryList (init) {
      this.loading = true
      if (init) {
        this.pageRequest.pageNo = 1
      }
      const {pageSize, pageNo} = this.pageRequest
      const {sTime, eTime, number} = this.searchForm
      const parmas = {
        pageSize,
        pageNo,
        startTime: sTime,
        endTime: eTime,
        exceptionParamter: number
      }
      const data = await queryGetTimeToNumber(parmas)
      if (data) {
        if (data.code === 200) {
          this.loading = false
          this.tableData = data.data.rows
          this.totalPage = data.data.totalRows
        } else {
          this.loading = false
          this.tableData = []
          this.totalPage = 0
        }
      }
    },
    // 时间开始选择器
    startTimeStatus (value) {
      if (value) {
        this.searchForm.sTime = value
      } else {
        this.searchForm.sTime = ''
      }
    },
    // 时间结束选择器
    endTimeStatus (value) {
      if (value) {
        this.searchForm.eTime = value
      } else {
        this.searchForm.eTime = ''
      }
    },
    handleAddEdit () {

    },
    handleButton () {},
    sizeChangeHandle (val) {
      this.pageRequest.pageSize = val
      this.queryList(true)
    },
    currentChangeHandle (val) {
      this.pageRequest.pageNo = val
      this.queryList()
    }
  },
  components: {
    CsTable,
    KtButton
  }
}
</script>
